function RePreviewImage({imgs, index = 0, callback}) {
  const body = document.body;
  const mask = document.createElement("div");
  mask.className = "re-mask";
  mask.setAttribute("style", `transition:opacity .3s;opacity:0;flex-direction:column;align-items:center;justify-content:center;display:flex;left:0;top:0;position:fixed;width:100%;height:100vh;background-color:rgba(0,0,0,.3);`);
  const imgDom = imgs.map((item, key) => `<img class="re-item-img" style="display: ${key === index ? 'block' : 'none'}" src="${item}" alt=""/>`).join("");
  mask.innerHTML = `<style>
.re-slider {
  width: fit-content;
  height: 70%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 750px) {
  .re-slider {
    width: 100%;
  }
}

.re-item-img {
  margin: 0 auto;
  height: 100%;
}

.re-prev, .re-next {
  width: 40px;
  height: 40px;
  border: 1px solid #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
  margin: 0 10px;
  font-family: 宋体, serif;
  line-height: 100%;
  box-sizing: border-box;
  user-select: none;
}
</style>
<div class="re-slider">${imgDom}</div>
<div style="display: flex;padding-top: 40px">
  <div class="re-prev"><</div>
  <div class="re-next">></div>
</div>`;
  body.append(mask);
  setTimeout(() => mask.style.opacity = "1");

  const itemImgs = mask.querySelectorAll(".re-item-img");

  mask.onclick = function () {
    mask.style.opacity = "0";
    setTimeout(() => this.remove(), 300);
  }

  mask.querySelector(".re-slider").onclick = (e) => e.stopPropagation();

  mask.querySelector(".re-next").onclick = function (e) {
    e.stopPropagation();
    if (index < itemImgs.length - 1) index += 1; else index = 0;
    itemImgs.forEach((item, key) => {
      if (key !== index)
        item.style.display = "none"
      else
        item.style.display = "block";
    });
    callback && callback(index, itemImgs[index], mask);
  }
  mask.querySelector(".re-prev").onclick = function (e) {
    e.stopPropagation();
    if (index === 0) index = itemImgs.length - 1; else index -= 1;
    itemImgs.forEach((item, key) => {
      if (key !== index)
        item.style.display = "none"
      else
        item.style.display = "block";
    });
    callback && callback(index, itemImgs[index], mask);
  }

  return mask;
}
